<template>
<el-dialog
   append-to-body
    v-if="showDialog"
    :title="dialogTitle"
    :visible.sync="showDialog"
    :width="width + '%'"
    :top="top + 'vh'">
   <el-carousel trigger="click" >
      <el-carousel-item v-for="(item,index) in images" :key="index">
        <el-image :src="item.url" fit="contain" style="width:100%;height:100%">
            <div slot="placeholder" class="image-slot">
        加载中<span class="dot">...</span>
      </div>
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
        </el-image>
      </el-carousel-item>
    </el-carousel>
</el-dialog>
</template>

<script>
export default {
  props: {
    top: {
      type: Number,
      default: 15
    },
    width: {
      type: [String, Number],
      default: 50
    }
  },
  components: {},
  data () {
    return {
      showDialog: false,
      dialogTitle: '',
      images: []
    }
  },
  methods: {
    show (title, images) {
      if (title) {
        this.dialogTitle = title
      }
      this.images = images
      this.showDialog = true
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
